<template>
  <list-detail-layout class="subscriptionDetail">
    <template #detailMain>
      <subscription-detail-main :tbData="tbData" :id="id" :info="info"></subscription-detail-main>
    </template>
    <template #detailRight>
      <div class="h100 orderDetailRight">
        <subscription-detail-base-info :detailBaseInfoData="info" class="baseInfo"></subscription-detail-base-info>
      </div>
    </template>
  </list-detail-layout>
</template>
<script>
import ListDetailLayout from '@/views/components/ListDetailLayout'
import SubscriptionDetailBaseInfo from './SubscriptionDetailBaseInfo'
import SubscriptionDetailMain from './SubscriptionDetailMain'
export default {
  components: {
    ListDetailLayout,
    SubscriptionDetailBaseInfo,
    SubscriptionDetailMain
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    nowTime: {
      type: Number,
      default: 369852741
    },
    info: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    tbData () {
      if (!this.detailData) {
        return []
      }
      return this.detailData.items
    }
  },
  data () {
    return {
      spinningLoading: false,
      detailData: null
    }
  },
  watch: {
    nowTime: {
      handler () {
        console.log(this.info, 'abc1')
        // this.getDetailData()
      },
      immediate: true
    }
  },
  methods: {
    getDetailData () {
      this.detailData = null
      if (!this.id) {
        return
      }
      this.spinningLoading = true
      this.$store.dispatch('getOrderManageInfoData', { id: this.id, type: 1, isDetail: true }).then(data => {
        this.detailData = data
      }).finally(() => {
        this.spinningLoading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.orderDetailRight {
  display: flex;
  flex-direction: column;
  .baseInfo {
    flex:none;
    padding:24px 24px 10px 24px;
  }
  .linkedStrategy {
    flex:1 0 0;
    overflow: hidden;
  }
}
</style>
<style lang="less">
.subscriptionDetail {
  .drawerListDetailRight {
    padding: 0 !important;
  }
}
</style>
